<template>
  <div class="new_create_query">
    <el-input :type="type === 'address' ? 'textarea' : 'text'"
              :value="value"
              :rows="4"
              :maxlength="max"
              v-bind="$attrs"
              @keypress.native="handleKeyPress"
              @input="currentVal"
              @blur="handleBlur" />
    <el-table v-show="isShowTable && value.length > 1"
              ref="singleTable"
              class="new_model"
              highlight-current-row
              :data="tableData"
              border
              @row-click="handleRowEvent">
      <template v-for="(column, index) in tableColumns">
        <el-table-column v-if="column.type !== 'address'"
                         :key="index"
                         :label="column.label"
                         :prop="column.name"
                         v-bind="$attrs">
        </el-table-column>
        <el-table-column v-else
                         :key="index"
                         :label="column.label"
                         v-bind="$attrs">
          <template slot-scope="scope">
            <address-name :province="scope.row.province"
                          :city="scope.row.city"
                          :district="scope.row.district" />
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import AddressName from "../../table/column/Address.vue";
export default {
  name: "OrderAddress",
  components: { AddressName },
  props: {
    value: [String, Number],
    type: [String],
    max: [Number],
    tableColumns: [],
    tableData: []
  },
  data () {
    return {
      isShowTable: false,
      keyIndex: 0
    };
  },
  mounted () {
    window.addEventListener("keydown", this.KeyboardEvent);
  },
  beforeDestroy () {
    window.removeEventListener("keydown", this.KeyboardEvent);
  },
  methods: {
    handleBlur () {
      setTimeout(() => this.initData(), 500);
    },
    initData () {
      this.keyIndex = 0;
      this.isShowTable = false;
    },
    async getList () {
      await this.$parent.getList();
      if (this.tableData.length > 0) {
        this.isShowTable = true;
        this.$refs.singleTable.setCurrentRow(this.tableData[0]);
      } else {
        this.isShowTable = false;
      }
    },
    KeyboardEvent (e) {
      if (!this.isShowTable || !this.tableData.length) return;
      if (e?.keyCode == 40) {
        this.keyIndex++;
        if (this.keyIndex == this.tableData.length) this.keyIndex = 0;
      }
      if (e?.keyCode == 38) {
        this.keyIndex--;
        if (this.keyIndex < 0) this.keyIndex = this.tableData.length - 1;
      }
      try {
        this.$refs.singleTable.setCurrentRow(this.tableData[this.keyIndex]);
        if (e?.keyCode == 13)
          this.handleRowEvent(this.tableData[this.keyIndex]);
      } catch (error) {
        console.log("error:", error);
      }
    },
    async currentVal (val) {
      if (val.match(/\s/g, '')) {
        val = val.replace(/\s/g, '');
      }
      await this.$emit("inputVal", val);
      if (val.length <= 1) return;
      this.getList();
    },
    handleCurrentChange (row) {
      this.$emit("input", row);
    },
    handleRowEvent (row) {
      this.$emit("input", row);
      this.showTableEvent();
    },
    showTableEvent () {
      this.isShowTable = !this.isShowTable;
    },
    handleKeyPress (event) {
      if (this.type != 'address') return
      const charCode = event.charCode;
      const char = String.fromCharCode(charCode);
      const pattern = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/; // 只允许中文字母和数字

      if (!pattern.test(char)) {
        event.preventDefault();
      }
    }
  }
};
</script>

<style lang="scss" scope>
.new_create_query {
  position: relative;
  .el-table.new_model {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    z-index: 1000;
    min-height: auto !important;
    .selectRow {
      background: var(--prev-border-color-grey);
    }
    .cell.el-tooltip span {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .el-table__body-wrapper {
      min-height: auto !important;
      max-height: 320px;
      overflow: auto;
      .has-gutter tr th {
        background-color: var(--prev-bg-white) !important;
      }
    }
  }
}
</style>
